import React from 'react';
import {inject, observer} from 'mobx-react';
import {WeaTableNew} from 'comsMobx';
import isEqual from 'lodash/isEqual';
import cloneDeep from 'lodash/cloneDeep';
import {WeaLocaleProvider} from 'ecCom';
import "../../style/PublicMultiVersion.less";

const getLabel = WeaLocaleProvider.getLabel;
const WeaTable = WeaTableNew.WeaTable;

import {
    WeaTop,
    WeaTab,
    WeaLeftTree,
    WeaLeftRightLayout,
    WeaSearchGroup,
    WeaRightMenu,
    WeaPopoverHrm,
    WeaInput,
    WeaInputSearch,
    WeaDialog,
    WeaSelect,
    WeaFormItem,
    WeaBrowser,
    WeaTextarea,
    WeaCheckbox
} from 'ecCom'
import {WeaErrorPage, WeaTools} from 'ecCom'
import {Button, Modal, Input, Alert, notification, message, Icon} from 'antd';


class PublicMultiVersion extends React.Component {
    constructor(props) {
        super(props);
        let obj = this.doInit(this.props);
        // let tempArr = [...obj.valArr];
        let tempArr = cloneDeep(obj.initArr);//引用类型有问题
        this.state = {
            isHover: obj.arr,
            left: '',
            versionVal: obj.valArr,
            initVersionVal: tempArr,
            contentPosition: 'left'
        }
    }

    doInit(nextProps) {
        const {datas = []} = nextProps;
        let arr = [], valArr = [], initArr = [];
        datas.map(v => {
            arr.push(false);
            valArr.push({
                versionNum: v.title,
                versionNote: v.desc,
                isAlive: v.isActiveVersion ? '1' : '0',
                workflowId: v.workflowId,
                isChecked: v.isActiveVersion ? '1' : '0',
            });
            initArr.push({
                versionNum: v.title,
                versionNote: v.desc,
                isAlive: v.isActiveVersion ? '1' : '0',
                workflowId: v.workflowId,
                isChecked: v.isActiveVersion ? '1' : '0',
            });
        })

        return {arr, valArr, initArr}
    }

    closePane() {
        let obj = this.doInit(this.props);
        this.setState({
            isHover: obj.arr,
            left: '',
            versionVal: obj.valArr,
        });
    }

    componentDidMount() {
    }

    componentWillUnmount() {
        ;
    }

    componentWillReceiveProps(nextProps) {
        this.doInit(nextProps);
    }

    getVersionData() {
        const {isHover, versionVal} = this.state;
        const hovers = cloneDeep(isHover);
        return {versionVal, hovers};
    }

    hideMultVersion() {
        const {isHover} = this.state;
        let tempArr = [];
        isHover.map(v => {
            tempArr.push(false);
        })
        this.setState({
            isHover: tempArr
        });
    }

    render() {
        const {
            datas = [], style = {
                width: '400px',
                height: '250px'
            }, buttons = [], keyTitle = '', onChange, clickItem
        } = this.props;
        const {isHover = [], versionVal, initVersionVal, contentPosition} = this.state;

        let items = [];
        datas.map((v, i) => {
            items.push(
                <li
                    onMouseEnter={(e) => {
                        let contentPos = 'left';
                        if ((window.innerWidth - e.pageX) < style.width.substring(0, style.width.length - 2)) {
                            contentPos = 'right';
                        }
                        let arr = isHover;
                        arr[i] = true;
                        this.setState({isHover: arr, contentPosition: contentPos});
                    }}
                    onMouseLeave={(e) => {
                        e.stopPropagation();
                        if (e.target.tagName.trim() == 'SPAN' || e.target.tagName.trim() == 'DIV') {
                            let arr = isHover;
                            arr[i] = false;
                            let valArr = cloneDeep(versionVal);
                            let _valArr = cloneDeep(initVersionVal);
                            valArr[i] = _valArr[i];

                            this.setState({
                                isHover: arr,
                                versionVal: valArr
                            });
                        }
                    }}
                    className={this.state.isHover[i] ? 'item-show' : 'item-hide'}
                >
                <span className={'title-name'}
                      style={{
                          background: this.state.isHover[i] ? '#fff' : '',
                          color: v.isActiveVersion ? '#ff6022' :
                              this.state.isHover[i] || v.title == keyTitle ? '#2db7f5' : '#c1c1c1'
                      }}
                      onClick={() => {
                          clickItem({workflowId: versionVal[i].workflowId}, v.title);
                          let arr = isHover;
                          arr[i] = false;
                          this.setState({
                              isHover: arr
                          });
                      }}
                >
                        {v.title}
                </span>
                    <div
                        className={this.state.isHover[i] ? 'version-content content-show' : 'version-content content-hide'}
                        style={contentPosition == 'left' ? {left: '0px', ...style} : {right: '0px', ...style}}>
                        <div className='version-content-mask-block'
                             style={contentPosition == 'left' ? {left: '0'} : {right: '0'}}>{v.title}</div>
                        {/* 样式辅助 */}
                        <WeaFormItem
                            label={getLabel(22186, '版本号')}
                            labelCol={{span: 8}}
                            wrapperCol={{span: 16}}>
                            <WeaInput
                                value={versionVal.length > 0 && versionVal[i].versionNum}
                                viewAttr={1}
                                onChange={(v) => {
                                    let versionObj = {}, versionArr = versionVal;
                                    versionObj = {...versionArr[i], versionNum: v}
                                    versionArr[i] = versionObj;
                                    this.setState({
                                        versionVal: versionArr
                                    })
                                }}
                            />
                        </WeaFormItem>
                        <WeaFormItem
                            label={getLabel(125122, '版本备注')}
                            labelCol={{span: 8}}
                            wrapperCol={{span: 16}}>
                            <WeaTextarea
                                minRows={4}
                                maxRows={4}
                                viewAttr={1}
                                value={versionVal.length > 0 && versionVal[i].versionNote}
                                onChange={(v) => {
                                    let versionObj = {}, versionArr = versionVal;
                                    versionObj = {...versionArr[i], versionNote: v}
                                    versionArr[i] = versionObj;
                                    this.setState({
                                        versionVal: versionArr
                                    })
                                }}
                            />
                        </WeaFormItem>
                        <WeaFormItem
                            label={getLabel(63, '类型')}
                            labelCol={{span: 8}}
                            wrapperCol={{span: 16}}>
                            <WeaInput
                                value={versionVal.length > 0 && versionVal[i].isAlive == "1" ? getLabel(131919, "活动版本") : getLabel(18500, "历史版本")}
                                viewAttr={1}
                                onChange={(v) => {
                                    let versionObj = {}, versionArr = versionVal;
                                    versionObj = {...versionArr[i], versionNum: v}
                                    versionArr[i] = versionObj;
                                    this.setState({
                                        versionVal: versionArr
                                    })
                                }}
                            />
                        </WeaFormItem>
                    </div>
                </li>
            )
        });

        return (
            <div className="wf-backstage-multiVersion-show-coms">
                <ul>
                    {items}
                </ul>

            </div>
        )
    }
}

export default PublicMultiVersion;


